<!-- 集体备课 -->
<template>
  <div class="training">
    <div class="basePageBox">
      <div class="screenTab">
        <FilterArea
          ref="filterArea"
          @changeFilter="changeFilter"
          :totalItems="totalItems"
          @updateData="updateData"
        ></FilterArea>
      </div>
      <div v-loading="trainLoading">
        <div class="trainingList" v-if="teachList.length">
          <TeachCard
            v-for="(item, index) in teachList"
            :key="'teach' + index"
            :cardData="item"
          ></TeachCard>
        </div>
        <div class="pagination" v-if="teachList.length">
          <CustomPagination
            layout="prev, pager, next"
            :total-items="totalItems"
            :page-size="pageSize"
            :current-page="pageNum"
            @pagination-current-change="handleCurrentChange"
          ></CustomPagination>
        </div>
        <el-empty v-if="!(!isLogin && selectVal !== 'ALL') && !teachList.length" description="暂无数据"></el-empty>
      </div>
      <div v-if="!isLogin && selectVal !== 'ALL'" class="toLogin">
        <el-button type="primary" @click="toLogin">去登录</el-button>
      </div>
    </div>
    <!-- <StaticIndex v-if="isStatic"></StaticIndex> -->
  </div>
</template>

<script>
import { toLogin, isStatic } from '@/utils/baseConfig'
import { getToken } from '@/utils/auth'
import TeachCard from '@/components/TeachCard.vue';
import CustomPagination from '@/components/CustomPagination.vue';
import FilterArea from './components/FilterArea.vue';
import { getTeachByCondition } from '@/api/teach';
// import StaticIndex from './components/StaticIndex.vue'

export default {
  name: 'Teach',
  components: {
    TeachCard,
    CustomPagination,
    FilterArea,
    // StaticIndex
  },
  data() {
    return {
      isStatic,
      // 分页
      totalItems: 100,
      pageSize: 12,
      pageNum: 1,
      teachList: [],
      trainLoading: true,
      selectVal: 'ALL'
    };
  },
  computed: {
    isLogin() {
      return !!getToken();
    },
  },
  mounted() {
    this.getTeachList();
    this.$bus.$on('emitNavPageSearch', () => {
      this.pageNum = 1
      this.getTeachList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('emitNavPageSearch')
  },
  methods: {
    // 获取 集体备课活动
    async getTeachList() {
      try {
        this.trainLoading = true;
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status:
            this.$refs.filterArea.filterData[0].selectVal === 'ALL'
              ? undefined
              : this.$refs.filterArea.filterData[0].selectVal, // 分类ID
          orderBy:
            this.$refs.filterArea.sortVal === 'ALL'
              ? undefined
              : this.$refs.filterArea.sortVal, // 排序,CREATE_TIME:最新/JOINS:最热
          myJoined: this.$refs.filterArea.selectVal === 'ALL' ? undefined : true,
          timeStatus:
            this.$refs.filterArea.filterData[1].selectVal === 'ALL'
              ? undefined
              : this.$refs.filterArea.filterData[1].selectVal, // 时间状态-MONTH:一月内/WEEK:一周内/HALF_YEAR:半年内/YEAR:半年以上/不传查全部
          name: this.$store.state.app.searchKey || ''
        };
        const resData = await getTeachByCondition(params);
        this.teachList = resData.list;
        this.totalItems = resData.total;
        this.trainLoading = false;
      } catch (error) {
        this.trainLoading = false;
        console.error(error);
      }
    },
    // 更新筛选
    changeFilter() {
      this.pageNum = 1;
      this.selectVal = this.$refs.filterArea?.selectVal;
      this.getTeachList();
    },
    // 处理当前页变化的逻辑
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getTeachList();
    },
    updateData() {
      this.getTeachList();
    },
    toLogin() {
      toLogin();
    }
  },
};
</script>

<style lang="scss" scoped>
.training {
  .screenTab {
    margin-top: 32px;
  }
  .trainingList {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 24px;
    margin-bottom: 32px;
  }
  .pagination {
    background-color: #fff; /* 举例背景色 */
    padding: 14px; /* 举例内边距 */
    text-align: center;
    margin-bottom: 64px;
  }
  .toLogin {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
